<template>
  <div :class="$style.wrapper">
    <div :class="$style.title">AI能力</div>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="default" tab="文本优化">
        <div :class="$style.inputDiv">
          文本：<a-textarea
            v-model:value="value1"
            placeholder="请输入"
            allow-clear
            :auto-size="{ minRows: 4 }"
            style="width: 500px"
          />
          <a-button
            type="primary"
            style="margin-left: 10px"
            @click="handleText"
          >
            生成
          </a-button>
          <a-button
            type="primary"
            style="margin-left: 10px"
            @click="resetValue"
          >
            重置
          </a-button>
        </div>
        <div :class="$style.result">
          <span>长度：</span>
          <a-input-number
            id="inputNumber"
            v-model:value="number1"
            :min="0"
            disabled
          />
        </div>
        <div :class="$style.result">
          <span>结果：</span>
          <div :class="[$style.area, $style.val]">{{ result1 }}</div>
        </div>
        <div>
          <span>评分：</span>
          <a-rate v-model:value="second1" :tooltips="desc" />
          <span class="ant-rate-text">{{ desc[second1 - 1] }}</span>
        </div>
      </a-tab-pane>
      <!-- region Description -->
      <!--      <a-tab-pane key="auto" tab="AI发布">-->
      <!--        <div :class="$style.inputDiv">-->
      <!--          内容：<a-textarea-->
      <!--            v-model:value="value2"-->
      <!--            placeholder="请输入"-->
      <!--            allow-clear-->
      <!--            :auto-size="{ minRows: 4 }"-->
      <!--            style="width: 500px"-->
      <!--          />-->
      <!--          <a-button-->
      <!--            type="primary"-->
      <!--            style="margin-left: 10px"-->
      <!--            @click="handlePublish"-->
      <!--          >-->
      <!--            生成-->
      <!--          </a-button>-->
      <!--        </div>-->
      <!--        <div :class="$style.result">-->
      <!--          <span>结果：</span>-->
      <!--          <div :class="[$style.area, $style.val]">{{ result2 }}</div>-->
      <!--        </div>-->
      <!--        <div>-->
      <!--          <span>评分：</span>-->
      <!--          <a-rate v-model:value="second2" :tooltips="desc" />-->
      <!--          <span class="ant-rate-text">{{ desc[second2 - 1] }}</span>-->
      <!--        </div>-->
      <!--      </a-tab-pane>-->
      <!-- endregion -->
      <a-tab-pane key="news" tab="AI新闻">
        <NewsList />
      </a-tab-pane>
      <a-tab-pane key="recommend" tab="推荐">
        <Recommend />
      </a-tab-pane>
    </a-tabs>
    <div :class="$style.logout" @click="logOut">退出登录</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import NewsList from '@/views/news-list.vue';
import { textOptimize } from '@/api';
import Recommend from '@/views/recommend.vue';
import { useRouter } from 'vue-router';

const desc = ref<string[]>(['较差', '差', '一般', '很好', '非常好']);
const value1 = ref<string>('');
const number1 = ref<number>(100);
const result1 = ref<string>('');
const second1 = ref<number>(0);
// const value2 = ref<string>('');
// const result2 = ref<string>('');
// const second2 = ref<number>(0);
const handleText = async () => {
  try {
    const params = {
      content: value1.value,
      abstract_len: number1.value,
    };
    const res = await textOptimize(params);
    result1.value = res.data.content;
  } catch {
    return false;
  }
};
const resetValue = () => {
  value1.value = '';
  result1.value = '';
};
// const handlePublish = () => {};
const activeKey = ref('recommend');
const router = useRouter();
const logOut = () => {
  localStorage.removeItem('user_token');
  router.push('/login');
};
</script>

<style module lang="less">
.wrapper {
  background: #f1f2f5;
  height: 100vh;
  padding: 50px 50px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  width: 100%;
  .title {
    margin-bottom: 16px;
    color: #34343c;
    font-size: 24px;
    font-weight: 500;
  }
  .inputDiv {
    display: flex;
  }
  .area {
    border-radius: 5px;
    border: 1px solid rgba(5, 5, 5, 0.06);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .result {
    display: flex;
    margin-top: 20px;
    .val {
      height: 300px;
      width: 800px;
      padding: 10px;
    }
  }
  .logout {
    position: absolute;
    right: 50px;
    top: 50px;
    cursor: pointer;
    color: #1890ff;
  }
}
</style>
